<template>
<div class="form-single-fragment" style="position: relative;">
  <header-handle :headerContent="formData.id ? (formStatus == 'edit' ? '品牌项目编辑':'品牌项目查看'):'品牌项目新增'" :buttons="formStatus == 'show' ? [] : handleButtons" @goBack="onCancel()"></header-handle>
  <el-divider class="mt0"></el-divider>
  <el-form ref="form" :model="formData" class="full-width-input content" label-width="100px" :size="defaultFormItemSize" label-position="right" @submit.native.prevent :disabled="formStatus == 'show'">
    <el-row :gutter="20" style="display: flex; flex-wrap: wrap">
      <el-col :span="24">
        <el-form-item label="项目名称" prop="projectName" :rules="$commonRules({ rule: 'required', msg: '请输入项目名称'})">
          <el-input class="input-item" v-model="formData.projectName" :clearable="true" placeholder="项目名称" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="项目类别" prop="projectType" :rules="$commonRules({ rule: 'required', msg: '请选择项目类别', trigger:'change' })">
          <el-select v-model="formData.projectType" :clearable="true" placeholder="项目类别" class="input-item">
            <el-option v-for="item in typeList" :key="item.id" :value="item.id" :label="item.name">
            </el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="服务对象" prop="serverTarget" :rules="$commonRules({ rule: 'required', msg: '请选择服务对象', trigger:'change' })">
          <el-select v-model="formData.serverTarget" :clearable="true" placeholder="服务对象" class="input-item">
            <el-option v-for="item in serverTargetList" :key="item.id" :value="item.id" :label="item.name">
            </el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="项目简介" prop="intro">
          <rich-editor-new :value.sync="formData.intro" :readOnly="formStatus == 'show'"></rich-editor-new>
          <!-- <el-input class="input-item" v-model="formData.intro" :clearable="true" placeholder="项目简介" type="textarea" :rows="2" /> -->
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="项目风采" prop="photos">
          <el-upload class="upload-image-item upload-image-multi" name="uploadFile" :headers="getUploadHeaders" :action="getUploadActionUrl('/admin/upms/file/upload')" :data="{ asImage: true}" multiple :on-success="onPictureUrlUploadSuccess"
            :on-remove="onPictureUrlRemoveFile" :before-upload="pictureFile" list-type="picture-card" :file-list="uploadWidgetImpl.fileList" :show-file-list="true" :on-preview="handlePreview">
            <i class="el-icon-plus upload-image-item"></i>
          </el-upload>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</div>
</template>
<script>
import {
  UploadWidget
} from '@/utils/widget.js';
import {
  uploadMixin
} from '@/core/mixins';
import {
  ProjectController
} from '@/api';
import projectConfig from '@/core/config';
import {
  api as viewerApi
} from 'v-viewer';
export default {
  name: "",
  mixins: [uploadMixin],
  props: {
    typeList: {
      type: Array,
      default: () => []
    },
    serverTargetList: {
      type: Array,
      default: () => []
    },
    initForm: {
      type: Object,
      default: () => {}
    },
    formStatus: {
      tyoe: String,
      default: "add"
    },
  },
  data() {
    return {
      handleButtons: [{
          status: 1,
          label: '取消',
          method: () => {
            this.onCancel();
          },
        },
        {
          type: 'primary',
          status: 1,
          label: '确定',
          method: () => {
            this.onConfirm();
          },
        }
      ],
      formData: {},
      uploadWidgetImpl: new UploadWidget(10),
      dialogVisible: false,
      dialogImageUrl: ""
    }
  },
  mounted() {
    if (Object.values(this.initForm).length > 0) {
      this.initFormContent()
    }
  },
  methods: {
    initFormContent() {
      let me = this;
      me.$set(me, "formData", me.initForm);
      if (me.formData?.photos?.length > 0) {
        let arr = [];
        me.formData.photos.forEach((item, i) => {
          me.uploadWidgetImpl.fileList.push({
            filename: item,
            url: projectConfig.baseUrl + 'admin/upms/file/download?filename=' + item
          })
        });
      }
    },
    onCancel() {
      this.$emit("goBack")
    },
    onConfirm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          ProjectController.add(this, this.formData).then(res => {
            this.$message.success("保存成功");
            this.$emit("goBack")
          }).catch(err => {
            this.$message.error(err)
          })
        }
      })
    },
    onPictureUrlUploadSuccess(response, file, fileList) {
      if (response.success) {
        file.downloadUri = response.data.downloadUri;
        file.filename = response.data.filename;
        file.url = URL.createObjectURL(file.raw);
        this.uploadWidgetImpl.onFileChange(file, fileList);
        this.formData.photos = this.uploadWidgetImpl.fileList.map(x => x.filename)
        this.fileListToJson(this.uploadWidgetImpl.fileList);
      } else {
        this.$message.error(response.message);
      }
    },
    /**
     * 移除课程图片
     */
    onPictureUrlRemoveFile(file, fileList) {
      this.uploadWidgetImpl.onFileChange(file, fileList);
      this.formData.photos = this.uploadWidgetImpl.fileList.map(x => x.filename)
    },
    handlePreview(val) {
      let arr = this.formData.photos.map(x => {
        return projectConfig.baseUrl + 'admin/upms/file/download?filename=' + x + '&type=1'
      });
      const $viewer = viewerApi({
        images: arr
      })
      // this.dialogImageUrl = val.url;
      // this.dialogVisible = true;
    },
  }
}
</script>
<style lang="scss" scoped>
</style>
